<!--
 * @Author: Rain
 * @Date: 2023/12/03 12:33:50
 * @LastEditTime: 2024/01/18 11:03:08
 * @Description: Do Something
-->
<template>
  <div class="app-container w-full h-full overflow-hidden">
    <!--工具栏-->
    <div class="head-container w-full h-full flex flex-col overflow-hidden">
      <div class="w-full flex items-center justify-end search">
        <!-- 搜索 -->
        <label class="el-form-item-label">标题</label>
        <el-input
          v-model="query.title"
          class="filter-item"
          clearable
          placeholder="标题"
          style="width: 185px"
          @keyup.enter.native="crud.toQuery"
        />
        <rrOperation :crud="crud" />
        <crudOperation :permission="permission" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <div class="w-full flex-1 overflow-hidden">
        <el-table
          ref="table"
          v-loading="crud.loading"
          :data="crud.data"
          size="small"
          style="width: 100%"
          @selection-change="crud.selectionChangeHandler"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            label="标题"
            prop="title"
          />
          <el-table-column
            label="副标题"
            prop="subTitle"
          />
          <el-table-column
            label="图片"
            prop="itemPic"
          >
            <template slot-scope="{ row }">
              <img
                :src="row.itemPic | imgTransform"
                alt
                style="width: 80px; height: 80px;border-radius: 10px;"
              >
            </template>
          </el-table-column>
          <el-table-column
            label="售价"
            prop="salePrice"
          />
          <el-table-column
            label="折扣价"
            prop="discountPrice"
          />
          <el-table-column
            align="center"
            label="一级分润"
            prop="oneLevelRatio"
          >
            <template slot-scope="{ row }">{{ row.oneLevelRatio }}%</template>
          </el-table-column>
          <el-table-column
            align="center"
            label="二级分润"
            prop="twoLevelRatio"
          >
            <template slot-scope="{ row }">{{ row.twoLevelRatio }}%</template>
          </el-table-column>
          <el-table-column
            align="center"
            label="门票数量"
            prop="ticketNum"
          />
          <el-table-column
            v-if="checkPer(['admin', 'identityItem:edit', 'identityItem:del'])"
            align="center"
            label="操作"
            width="210px"
          >
            <template slot-scope="scope">
              <div class="flex items-center flex-center">
                <el-button
                  icon="el-icon-discount"
                  size="mini"
                  style="margin-right: 4px"
                  title="分润设置"
                  type="primary"
                  @click="handleDiscount(scope.row)"
                />
                <el-button
                  icon="el-icon-s-tools"
                  size="mini"
                  style="margin-right: 4px"
                  title="编辑"
                  type="primary"
                  @click="handleEdit(scope.row)"
                />
                <udOperation
                  :data="scope.row"
                  :permission="permission"
                />
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination />
    </div>
    <el-dialog
      :before-close="crud.cancelCU"
      :close-on-click-modal="false"
      :title="crud.status.title"
      :visible.sync="crud.status.cu > 0"
      width="60%"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        size="small"
      >
        <el-form-item
          :rules="[{ required: true, message: '标题不能为空' }]"
          label="标题"
          prop="title"
        >
          <el-input
            v-model="form.title"
            style="width: 370px"
          />
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '副标题不能为空' }]"
          label="副标题"
          prop="subTitle"
        >
          <el-input
            v-model="form.subTitle"
            style="width: 370px"
          />
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '图片不能为空' }]"
          label="图片"
          prop="itemPic"
        >
          <uploadImg
            ref="uploadImage"
            :show-tip="false"
            :src="form.itemPic"
            @upload="($event) => (form.itemPic = $event)"
          />
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '售价不能为空' }]"
          label="售价"
          prop="salePrice"
        >
          <el-input
            v-model.number="form.salePrice"
            style="width: 370px"
          />
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '折扣价不能为空' }]"
          label="折扣价"
          prop="discountPrice"
        >
          <el-input
            v-model.number="form.discountPrice"
            style="width: 370px"
          />
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '一级分润不能为空' }]"
          label="一级分润"
          prop="oneLevelRatio"
        >
          <el-input
            v-model.number="form.oneLevelRatio"
            style="width: 370px"
          >
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '二级分润不能为空' }]"
          label="二级分润"
          prop="twoLevelRatio"
        >
          <el-input
            v-model.number="form.twoLevelRatio"
            style="width: 370px"
          >
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '门票数量不能为空' }]"
          label="门票数量"
          prop="ticketNum"
        >
          <el-input
            v-model.number="form.ticketNum"
            style="width: 370px"
          />
        </el-form-item>
        <el-form-item
          label="介绍"
          prop="itemDesc"
        >
          <Editor
            ref="editor"
            :content="form.itemDesc"
          />
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          style="margin-right: 10px"
          type="default"
          @click="crud.cancelCU"
        >取消</el-button>
        <el-button
          :loading="crud.status.cu === 2"
          type="primary"
          @click="submitAction"
        >确认</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisible"
      title="课程管理"
      width="700px"
    >
      <div
        class="w-full overflow-y-auto"
        style="height: 400px; max-height: 400px"
      >
        <el-checkbox-group
          v-model="selectCourse"
          class="grid grid-cols-3 gap-10"
        >
          <el-checkbox
            v-for="(item, index) in courseList"
            :key="index"
            :label="item.courseId"
          >{{ item.courseName }}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          :disabled="selectCourse.length === 0"
          type="primary"
          @click="createOrder"
        >确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="showDiscount"
      title="分润设置"
      width="500px"
    >
      <el-form
        ref="dicForm"
        :model="form"
        label-width="120px"
      >
        <el-form-item label="名称">
          <el-input
            v-model="form.title"
            readonly
          />
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '一级分润不能为空' }]"
          label="一级分润"
          prop="oneLevelRatio"
        >
          <el-input v-model="form.oneLevelRatio">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '二级分润不能为空' }]"
          label="二级分润"
          prop="twoLevelRatio"
        >
          <el-input v-model="form.twoLevelRatio">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '门票权益不能为空' }]"
          label="门票权益"
          prop="ticketNum"
        >
          <el-input v-model="form.ticketNum" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="showDiscount = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submitDiscount"
        >提交申请</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import crudIdentityItem from '@/api/identityItem'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import uploadImg from '@/components/uploadImage'
import Editor from '@/components/Editor'
import { get } from '@/api/course'
import { addOrder } from '@/api/disChangeApply'
import { Message } from 'element-ui'

const defaultForm = {
  itemId: null,
  itemNo: null,
  title: null,
  subTitle: null,
  itemPic: null,
  salePrice: null,
  discountPrice: null,
  itemDesc: null,
  createTime: null,
  createby: null,
  updateTime: null,
  updateby: null,
  status: null,
  oneLevelRatio: null,
  twoLevelRatio: null,
  ticketNum: null
}
export default {
  name: 'IdentityItem',
  components: {
    pagination,
    crudOperation,
    rrOperation,
    udOperation,
    uploadImg,
    Editor
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({
      title: '身份产品',
      url: 'api/identityItem',
      idField: 'itemId',
      sort: 'itemId,desc',
      crudMethod: { ...crudIdentityItem }
    })
  },
  data() {
    return {
      permission: {
        add: ['admin', 'identityItem:add'],
        edit: ['admin', 'identityItem:edit'],
        del: ['admin', 'identityItem:del']
      },
      rules: {},
      queryTypeOptions: [{ key: 'title', display_name: '标题' }],
      dialogVisible: false,
      courseList: [],
      selectCourse: [],
      selectRow: {},
      showDiscount: false
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    submitAction() {
      this.$refs['form'].validate((validate) => {
        if (validate) {
          this.$refs['uploadImage'].handleUpload().then((res) => {
            this.form.itemDesc = this.$refs.editor.getContent()
            this.crud.submitCU()
          })
        }
      })
    },
    handleEdit(row) {
      this.selectRow = row
      this.selectCourse = []
      console.log(row)
      get({ page: 0, size: 10000000 }).then((_) => {
        const { content } = _
        this.courseList = content
        this.dialogVisible = true
      })
    },
    createOrder() {
      const items = this.courseList
        .filter((item) => this.selectCourse.includes(item.courseId))
        .map((item) => {
          const { courseId, courseName, courseNo, subTitle } = item
          return { courseId, courseName, courseNo, subTitle }
        })
      const params = {
        applyContent: JSON.stringify({
          identityCourseList: items,
          itemId: this.selectRow.itemId,
          course: this.selectRow
        }),
        applyType: 1,
        applyStatus: -1,
        refuseMsg: ''
      }
      addOrder(params).then((_) => {
        Message.success('操作成功!')
        this.dialogVisible = false
      })
    },
    handleDiscount(row) {
      this.form = row
      const { oneLevelRatio: defaultoneLevelRatio, twoLevelRatio: defaulttwoLevelRatio, ticketNum: defaulticketNum } = row
      Object.assign(this.form, { defaultoneLevelRatio, defaulttwoLevelRatio, defaulticketNum })
      this.showDiscount = true
    },
    submitDiscount() {
      this.$refs['dicForm'].validate((validate) => {
        if (validate) {
          const params = {
            applyContent: JSON.stringify({
              ...this.form
            }),
            applyType: 2,
            applyStatus: -1,
            refuseMsg: ''
          }
          addOrder(params).then((_) => {
            Message.success('申请成功!')
            this.showDiscount = false
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep {
  .el-checkbox {
    display: flex;
    align-items: center;
    .el-checkbox__label {
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
    }
  }
}
</style>
